<template>
  <div class="app-container">
    <el-card>
      <el-tabs>
        <el-row style="height:60px" type="flex" align="middle">
          <el-button
            icon="el-icon-circle-plus-outline"
            size="small"
            type="primary"
            class="addbtn"
            @click="Visible = true"
          >新增</el-button>
        </el-row>
        <el-table
          v-loading="loading"
          :data=" searchList.currentPageRecords ||tableData.currentPageRecords"
          style="width: 100% height=480px"
        >
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column prop="taskCode" label="工单编号" width="200" />
          <el-table-column prop="innerCode" label="设备编号" width="180" />
          <el-table-column prop="taskType.typeName" label="工单类型" width="150" />
          <el-table-column prop="createType" label="工单方式" width="150" :formatter="createTypefn" />
          <el-table-column prop="taskStatusTypeEntity.statusName" label="工单状态" width="150" />
          <el-table-column prop="userName" label="运维人员" width="150" />
          <el-table-column prop="createTime" label="创建日期" width="200">
            <template #default="{row}">{{ row.createTime | formatDate }}</template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template #default="{row}">
              <el-button type="text" size="small" @click="det(row) ">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row
          v-if="searchList.totalCount==='0'?false:true"
          type="flex"
          justify="end"
          align="middle"
          style="height: 60px"
          class="paging"
          hide-on-single-page
        >
          <el-pagination layout=" slot">
            <template>
              <span class="countSize">共{{ +searchList.totalCount || +tableData.totalCount }}条记录</span>
              <span
                class="countSize"
              >第{{ +searchList.pageIndex || +tableData.pageIndex }}/{{ +searchList.totalPage || +tableData.totalPage }}页</span>
            </template>
          </el-pagination>
          <el-pagination
            background
            layout="prev, next, total"
            prev-text="上一页"
            next-text="下一页"
            :current-page.sync="data.pageIndex"
            :page-size.sync="data.pageSize"
            @current-change="search"
            @size-change="search"
          />
        </el-row>
      </el-tabs>
    </el-card>
    <ElDkdPCAdd :add-visible.sync="Visible" />
    <ElDkdPCDet :det-visible.sync="detVisible" :detlistarr="detList" />
  </div>
</template>

<script>
import { search, taskInfo } from '@/api/task'
// import add from './add.vue'
// import det from './det.vue'
import enums from '@/Enums/task'
export default {
  name: 'TaskTable',
  components: {
    // add,
    // det
  },
  props: {
    searchList: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tableData: {},
      Visible: false,
      loading: false,
      data: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: true
      },
      detVisible: false,
      detList: {}
    }
  },
  created() {
    this.search()
  },
  methods: {
    async search() {
      try {
        this.loading = true
        this.tableData = await search(this.data)
        if (this.searchList.totalPage && this.searchList.totalPage > 0) {
          // this.data.pageIndex = 1
          this.$emit('search', this.data.pageIndex)
        }
        if (
          this.tableData.currentPageRecords.length === 0 &&
          this.tableData.totalPage !== 0
        ) {
          this.data.pageIndex = this.data.pageIndex - 1
          this.search()
        }

        // console.log(this.tableData.currentPageRecords)
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    },
    createTypefn(row, columnm, cellValue, index) {
      const info = enums.task.find((item) => item.id === cellValue)
      return info && info.value
    },
    det(row) {
      this.taskInfoApi(row.taskId)
      this.detList = row
      console.log(this.detList)
      this.detVisible = true
      // console.log(row)
    },
    async taskInfoApi(taskId) {
      const res = await taskInfo(taskId)
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .cell {
  display: block !important;
}
::v-deep .has-gutter tr th {
  background-color: #f3f6fb !important;
}
::v-deep .hidden-columns {
  position: relative !important;
}
.addbtn {
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  border: none;
}
.paging {
  justify-content: space-between;
}
::v-deep .btn-prev,
.btn-next {
  width: 70px;
  height: 32px;
  margin: 0 10px;
}
::v-deep .btn-next {
  width: 70px;
  height: 32px;
  margin: 0 10px;
}
.countSize {
  color: #eee;
  font-size: 16px !important;
  padding: 0 5px;
}
</style>
